<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>张志福-小米账号-登录</title>
		<style type="text/css">
			* {
				margin: 0;
				top: 0;
				font-family: arial, "Hiragino Sans GB", "Microsoft YaHei", "微軟正黑體", "儷黑 Pro", sans-serif;
			}
			
			.head {
				height: 98px;
				margin: 0 auto;
				width: 1130px;
				text-align: left;
			}
			
			.wrap {
				background-color: #14212A;
				height: 588px;
			}
			
			.main {
				width: 1130px;
				height: 588px;
				margin: 0 auto;
				background-image: url(img/banner.jpg);
				background-repeat: no-repeat;
				background-position: center;
				position: relative;
			}
			
			.denglu {
				height: 524px;
				width: 400px;
				background-color: white;
				position: absolute;
				top: 32px;
				right: 0;
			}
			
			.foot {
				height: 148px;
				width: 1130px;
				margin: 0 auto;
				/*border: 1px solid;*/
				overflow: hidden;
			}
			
			.foot1 {
				width: 300px;
				height: 40px;
				margin: 0 auto;
				/*border: 1px solid;*/
				margin-top: 56px;
			}
			
			.foot1 li {
				float: left;
				list-style: none;
				font-size: 12px;
				line-height: 40px;
			}
			
			.foot1 span {
				padding: 0 12px;
				color: #818181;
			}
			
			.foot1 li a {
				text-decoration: none;
				color: #818181;
			}
			
			.foot2 {
				height: 29px;
				width: 600px;
				margin: 0 auto;
				font-size: 12px;
				color: #818181;
				text-align: center;
			}
			
			.nav {
				width: 400px;
				height: 31px;
				margin-top: 29px;
				margin-bottom: 33px;
				font-size: 24px;
			}
			
			.nav-left {
				width: 168px;
				height: 30px;
				display: inline-block;
				border-right: 1px solid #E0E0E0;
				padding-right: 6px;
				line-height: 30px;
				text-align: center;
				margin-left: 24px;
				cursor: pointer;
				color: #EF6700;
			}
			
			.nav-left:hover {
				color: #EF6700;
			}
			
			.nav-right {
				width: 168px;
				height: 30px;
				display: inline-block;
				border-left: 1px solid #E0E0E0;
				padding-left: 6px;
				line-height: 30px;
				text-align: center;
				margin-right: 24px;
				cursor: pointer;
			}
			
			.nav-right:hover {
				color: #EF6700;
			}
			
			.user {
				width: 306px;
				height: 22px;
				line-height: 22px;
				padding: 13px 16px 13px 14px;
				display: block;
				outline: none;
				border: 1px solid #E0E0E0;
			}
			
			.denglu-wrap {
				width: 338px;
				margin: 0 auto;
			}
			
			.pass {
				margin-top: 14px;
				width: 306px;
				height: 22px;
				line-height: 22px;
				padding: 13px 16px 13px 14px;
				display: block;
				outline: none;
				border: 1px solid #E0E0E0;
				margin-bottom: 13px;
			}
			
			.sign {
				width: 338px;
				height: 50px;
				background-color: #EF6700;
				text-align: center;
				line-height: 50px;
				color: white;
				margin-top: 13px;
				font-size: 18px;
				border: 0;
				outline: none;
				cursor: pointer;
			}
			
			.account {
				width: 338px;
				height: 19px;
				margin-top: 17px;
				text-align: center;
				font-size: 14px;
			}
			
			.account a,
			.account span {
				text-decoration: none;
				color: #999999;
				margin: 0 5px 0 5px;
			}
			
			.account a:hover {
				color: #EF6700;
			}
			
			.other {
				width: 338px;
				height: 18px;
				margin-top: 127px;
				border-top: 1px solid #E0E0E0;
				position: relative;
			}
			
			.other1 {
				display: block;
				height: 14px;
				width: 84px;
				background-color: white;
				font-size: 14px;
				color: #999999;
				line-height: 14px;
				position: absolute;
				right: 50%;
				margin-right: -42px;
				top: -7px;
			}
			
			.other2 {
				width: 338px;
			}
			
			.sp1,
			.sp2,
			.sp3,
			.sp4 {
				width: 30px;
				height: 30px;
				border-radius: 50%;
				display: inline-block;
				background-color: #666666;
			}
			
			.sp1 {
				margin-left: 52px;
				background-image: url(img/qq.png);
				background-repeat: no-repeat;
				background-position: center;
			}
			
			.sp1:hover {
				background-image: url(img/qqh.png);
			}
			
			.sp2 {
				margin-left: 34px;
				background-image: url(img/wb.png);
				background-repeat: no-repeat;
				background-position: center;
			}
			
			.sp2:hover {
				background-image: url(img/wbh.png);
			}
			
			.sp3 {
				margin-left: 34px;
				background-image: url(img/zfb.png);
				background-repeat: no-repeat;
				background-position: center;
			}
			
			.sp3:hover {
				background-image: url(img/zfbh.png);
			}
			
			.sp4 {
				margin-left: 34px;
				background-image: url(img/wx.png);
				background-repeat: no-repeat;
				background-position: center;
			}
			
			.sp4:hover {
				background-image: url(img/wxh.png);
			}
			
			.saoma-wrap {
				width: 400px;
				height: 235px;
				margin: 0 auto;
				padding-top: 68px;
				display: none;
			}
			
			.qrcon {
				text-align: center;
			}
			
			.p1 {
				font-size: 14px;
				text-align: center;
				color: #757575;
				margin-top: 13px;
			}
			.warn{
				font-size: 14px;
				color: #EF6700;
				line-height: 26px;
				text-align: left;
				display: none;
			}
			.sp5{
				display: inline-block;
				color: white;
				width: 14px;
				height: 14px;
				background-color: #EF6700;
				text-align: center;
				border-radius: 50%;
				line-height: 14px;
			}
			.warn2{
				font-size: 14px;
				color: #EF6700;
				line-height: 26px;
				text-align: left;
				display: none;
				
			}
		</style>
	</head>

	<body>
		<div class="head">
			<img src="img/mistore_logo.png" />
		</div>
		<div class="wrap">
			<div class="main">
				<div class="denglu">
					<div class="nav">
						<span class="nav-left" onclick="sign(this)">帐号登录</span><span class="nav-right" onclick="qrcon(this)">扫码登录</span>
					</div>
					<div class="denglu-wrap">
						<div>
							<form id="SignIn">
								<input class="user" type="text" id="username" name="user" value="" placeholder="邮箱/手机号码/小米帐号"/>
								<input class="pass" type="password" id="password" name="password" value="" placeholder="密码" />
								<p class="warn"><span class="sp5">!</span> 请输入帐号</p>
								<p class="warn"><span class="sp5">!</span> 用户名不正确</p>
								<p class="warn"><span class="sp5">!</span> 请输入密码</p>
								<input type="button" id="" value="立即登录" class="sign" onclick="dengLu()"/>
							</form>
						</div>
						<div class="account">
							<a href="xm-zc.html">注册小米帐号</a><span>|</span>
							<a href="#">忘记密码?</a>
						</div>
						<div class="other">
							<span class="other1">其他方式登录</span>
						</div>
						<div class="other2">
							<a href="#"><span class="sp1"></span></a>
							<a href="#"><span class="sp2"></span></a>
							<a href="#"><span class="sp3"></span></a>
							<a href="#"><span class="sp4"></span></a>
						</div>
					</div>
					<div class="saoma-wrap">
						<div class="qrcon">
							<img src="img/xz.png" />
						</div>
						<div class="p1">
							<p>使用 <span style="color: #EF6700;">小米商城APP</span> 扫一扫</p>
							<p>请打开「设置 > 小米帐号 > 右上角扫一扫」扫码登录</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="foot">
			<div class="foot1">
				<ul>
					<li>
						<a href="#">简体</a><span>|</span></li>
					<li>
						<a href="#">繁体</a><span>|</span></li>
					<li>
						<a href="#">English</a><span>|</span></li>
					<li>
						<a href="#">常见问题</a>
					</li>
				</ul>
			</div>
			<div class="foot2">
				<p>小米公司版权所有-京ICP备10046444-
					<a href="#"><img src="img/ghs.png" /></a>京公网安备11010802020134号-京ICP证110507号</p>
			</div>
		</div>
		<script type="text/javascript">
			function sign(t) {
				t.parentNode.parentNode.children[1].style.display = "block";
				t.parentNode.parentNode.children[2].style.display = "none";
				t.style.color = "#EF6700"
				t.parentNode.children[1].style.color = "#666666"
			}

			function qrcon(t) {
				t.parentNode.parentNode.children[1].style.display = "none";
				t.parentNode.parentNode.children[2].style.display = "block";
				t.style.color = "#EF6700"
				t.parentNode.children[0].style.color = "#666666"
			}
//			function col(t) {
//				t.style.color = "#EF67OO"
//			}
//
//			function cols(t) {
//				if(t.style.color == "#EF67OO") {
//					t.style.color = "#EF67OO"
//				}else{
//					t.style.color = "#666666"
//				}
//			}
			var phone = /1[34578]\d{8}/
			var em = /^[A-Za-z\d]+([-._]\w+)?[@][A-Za-z]+[.][A-Za-z\d]+([.]\w+)?$/;
			var user = document.getElementById("username");
			var pass = document.getElementById("password")
			function dengLu(){
				if(user.value.trim()==""){
					user.parentNode.children[2].style.display="block"
					user.parentNode.children[3].style.display="none"
					user.parentNode.children[4].style.display="none"
					user.style.border="1px solid #EF6700"
					pass.style.border="1px solid #E0E0E0"
				}else if(user.value.indexOf("@")<0){
					if(!(phone.test(user.value))){
						user.parentNode.children[3].style.display="block"
						user.parentNode.children[2].style.display="none"
						user.parentNode.children[4].style.display="none"
						pass.style.border="1px solid #E0E0E0"
						user.style.border="1px solid #EF6700"
					}else if(pass.value.trim()==""){
					user.parentNode.children[4].style.display="block"
					user.parentNode.children[3].style.display="none"
					user.parentNode.children[2].style.display="none"
					pass.style.border="1px solid #EF6700"
					user.style.border="1px solid #E0E0E0"
					}else{
					document.getElementById("SignIn").submit();
					}
				}else if(user.value.indexOf("@")>=0){
					if(!(em.test(user.value))){
						user.parentNode.children[3].style.display="block"
						user.parentNode.children[2].style.display="none"
						user.parentNode.children[4].style.display="none"
						pass.style.border="1px solid #E0E0E0"
						user.style.border="1px solid #EF6700"
					}else if(pass.value.trim()==""){
					user.parentNode.children[4].style.display="block"
					user.parentNode.children[3].style.display="none"
					user.parentNode.children[2].style.display="none"
					pass.style.border="1px solid #EF6700"
					user.style.border="1px solid #E0E0E0"
					}else{
					document.getElementById("SignIn").submit();
					}
				}
				user.parentNode.parentNode.parentNode.children[2].style.marginTop="101px"
			}
		</script>
	</body>

</html>